<template>
  <div class='webheader'>
    <div class='header-center'>
        <li class='nopointli headerli'>
         <router-link to="/" class='headerlogo'>
            <img src="../assets/logo_green.png">
         </router-link>
        </li>

        <li class=' headerli' >
         <router-link to="/Home" class=' headerHome' :class="selectType === 'Home' ? 'routerSelect':'routerUnSelect'" @click.native="changeType('Home')" @mouseover.native="moveing('Home')">
            首页
         </router-link>
        </li>

        <li class=' headerli' >
         <router-link to="/CarryPackage" class=' headerCarryPackage'  :class="selectType === 'CarryPackage' ? 'routerSelect':'routerUnSelect'" @click.native="changeType('CarryPackage')" @mouseover.native="moveing('CarryPackage')">
            整装产品
         </router-link>
        </li>

        <li class=' headerli' >
         <router-link to="/Designercase" class='headerDesignercase' :class="selectType === 'Designercase' ? 'routerSelect':'routerUnSelect'" @click.native="changeType('Designercase')" @mouseover.native="moveing('Designercase')">
            案例精选
         </router-link>
        </li>

        <li class=' headerli' >
         <router-link to="/Designer" class='headerDesigner' :class="selectType === 'Designer' ? 'routerSelect':'routerUnSelect'" @click.native="changeType('Designer')" @mouseover.native="moveing('Designer')">
            设计团队
         </router-link>
        </li>

    </div>
    <div class='header-right'>
        <div class='header-right-div'>
          <img src="../assets/tel.png" >
        </div>
        <span class='header-right-li'> 4008-323-100</span><br>
        <span class='header-right-li1'> 咨询热线：15682036935</span>
    </div>

    <div v-if="show" class='header-bottom animationIn' @mouseout="moveout()">
      <div v-for="data in this.list[this.showType]" :key="data"> {{data}}</div>
    </div>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
export default{
  data () {
    return {
      show: false,
      list: {
        'Home': [],
        'CarryPackage': ['1', '2'],
        'Designercase': ['3', '4', '5'],
        'Designer': []
      },
      showType: 'Home'
    }
  },
  props: {
    selectType: {
      type: String,
      default: 'Home'
    }
  },
  created () {
  },
  components: {},
  methods: {
    changeType: function (type) {
      this.selectType = type
      console.log(this.selectType)
    },
    moveing: function (type) {
      this.showType = type
      // 没有显示的情况下，进行显示
      if (!this.show && this.list[type].length > 0) {
        this.show = !this.show
      }
      // 显示情况下，移动到不显示的选项
      if (this.show && this.list[type].length === 0) {
        this.show = !this.show
      }
    },
    moveout: function () {
      if (this.show) {
        this.show = !this.show
      }
    }
  }
}
</script>

<style>
.nopointli{
  list-style-type: none;
  list-style: none;
}
.headerli{
  float: left;
  list-style-type: none;
  list-style: none;
  width: 100px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.webheader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
  border-bottom: 1px solid #ed424b;
  // color: #fff;
  background-color: white;
  box-sizing: border-box;
  z-index: 100;
}
.header-center{
  width: 80%;
  margin-top: 20px;
  height: 40px;
  // background-color: rgb(148,148,148);
}
.nopointli{
 margin-left: 10%;
 width: 140px;
}

.routerSelect{
    text-decoration:none;
    color:rgb(0,174,103);
}
.routerUnSelect{
    text-decoration:none;
    color:black;
}
.routerUnSelect:hover {
 color: rgb(0,174,103); /*鼠标经过的颜色变化*/
}

.headerHome{
 margin-left: 50px
}

.header-right{
    float: right;
    width: 20%;
    height: 80px;
    margin-top: -40px;

}
.header-right-div{
    margin-top: 5px;
    float: left;
    width: 25px;
    height: 25px;
    line-height: 25px;
}
.header-right-li{
    float: left;
    height: 20px;
    margin-left: 5px;
    font-size: 16px;
}
.header-right-li1{
    float: left;
    height: 20px;
    margin-left: 5px;
    font-size: 10px;
}
.header-bottom{
  background: rgb(0,174,103);
  display: block;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
}
.animationIn{
  animation:myfirst 1s;
  -webkit-animation:myfirst 1s; /* Safari and Chrome */
}
@keyframes myfirst
{
  from {height:0px;}
  to {height:80px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
  from {height:0px;}
  to {height:80px;}
}
.animationOut{
  animation:mytwo 2s;
  -webkit-animation:mytwo 2s; /* Safari and Chrome */
}
@keyframes mytwo
{
  from {height:80px;}
  to {height:0px;}
}
@-webkit-keyframes mytwo /* Safari and Chrome */
{
  from {height:80px;}
  to {height:0px;}
}
</style>
